<template>
    <div class="login_page">
        <div class="common-layout">
            <el-container>
                <div class="title">登录</div>
                <el-main>
                    <el-form ref="formRef" :model="numberValidateForm" label-width="0px" class="demo-ruleForm">
                        <el-form-item prop="username" :rules="[
                            { required: true, message: '用户名必填' },
                        ]">
                            <el-input class="inputUsername" v-model="numberValidateForm.username" type="text"
                                autocomplete="off" :prefix-icon="User" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item prop="password" :rules="[
                            { required: true, message: '密码必填' },
                        ]">
                            <el-input class="inputPassword" v-model="numberValidateForm.password" type="password"
                                autocomplete="off" show-password :prefix-icon="Lock" placeholder="请输入密码" />
                        </el-form-item>
                        <el-form-item class="button-container-submit">
                            <el-button type="primary" @click="submitForm(formRef)">登录</el-button>
                        </el-form-item>
                        <el-form-item class="button-container-reset">
                            <el-button @click="resetForm(formRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
            <div class="square">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="circle">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import axios from '../api/axios.js'
import { useCookies } from "vue3-cookies"

const { cookies } = useCookies();

const router = useRouter()
const formRef = ref()
const numberValidateForm = reactive({
    password: '',
    username: '',
    _csrf: ''
})

// async function getCsrf() {
//     try {
//         const res = await axios.get('/admin/csrf')
//         console.log(res)
//         numberValidateForm._csrf = res.data.token
//         localStorage.setItem('_csrf', res.data.token)
//     } catch (err) {
//         console.log(err)
//     }
// }

// getCsrf()

const submitForm = async (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })

    try {
        const res = await axios.post('/login', {
            username: numberValidateForm.username,
            password: numberValidateForm.password,
            _csrf: numberValidateForm._csrf
        }, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        console.log('请求成功')
        console.log(res)
        if (res.data.code == '200') {
            ElMessage({
                message: '登录成功!',
                type: 'success'
            })
        } else {
            ElMessage.error('用户名或密码错误')
            return
        }
        setTimeout(() => {
            router.push('/home/task/unfinished')
            const authorities = res.data.data.authorities
            const arr = []
            authorities.forEach(authority => {
                arr.push(authority.authority)
            })
            // localStorage.setItem("flag", true)

            cookies.set("id", res.data.data.id,60*60*24*7)
            cookies.set("name", res.data.data.name,60*60*24*7)
            cookies.set("image", res.data.data.image,60*60*24*7)
            cookies.set("username", res.data.data.username,60*60*24*7)
            cookies.set("authorities", arr,60*60*24*7)
            // router.go(0)
        }, 1000)
    } catch (error) {
        console.log('请求失败')
        console.log(error)
    }
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.login_page {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #f9c1fd, #b0dfee);
    overflow: hidden;
}

.el-container {
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
    height: 500px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.el-container .title {
    font-size: 26px;
    margin: 65px auto 70px auto;
}

.el-form-item {
    margin: 10px;
}

.inputUsername {
    :deep(.el-input__wrapper) {
        width: 280px;
        height: 30px;
        text-indent: 8px;
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        outline: none;
        margin: 12px auto;
        border-bottom: 1px solid #ddd;
        cursor: default;

        .el-input__inner {
            cursor: default !important;
        }
    }
}

.inputPassword {
    :deep(.el-input__wrapper) {
        width: 280px;
        height: 30px;
        text-indent: 8px;
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        outline: none;
        margin: 12px auto;
        border-bottom: 1px solid #ddd;
        cursor: default;

        .el-input__inner {
            cursor: default !important;
        }
    }
}

button.el-button.el-button--primary {
    width: 150px;
    height: 40px;
    margin: 10px auto 10px auto;
    background: linear-gradient(-200deg, #fac0e7, #aac2ee);
    color: #fff;
    font-weight: bold;
    letter-spacing: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}

button.el-button.el-button--primary:hover {
    background: linear-gradient(-200deg, #aac2ee, #fac0e7);
    background-position-x: -150px;
}

button.el-button {
    width: 150px;
    height: 40px;
    margin: 0px auto 40px auto;
    background: #bcc1c3;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 8px;
    border-radius: 10px;
    cursor: pointer;
}

ul li {
    position: absolute;
    border: 1px solid #fff;
    background-color: #fff;
    width: 30px;
    height: 30px;
    list-style: none;
    opacity: 0;
}

.square li {
    top: 40vh;
    left: 60vw;
    animation: square 10s linear infinite;
}

.square li:nth-child(2) {
    top: 80vh;
    left: 10vw;
    animation-delay: 2s;
}

.square li:nth-child(3) {
    top: 80vh;
    left: 85vw;
    animation-delay: 4s;
}

.square li:nth-child(4) {
    top: 10vh;
    left: 70vw;
    animation-delay: 6s;
}

.square li:nth-child(5) {
    top: 10vh;
    left: 10vw;
    animation-delay: 8s;
}

.circle li {
    bottom: 0;
    left: 15vw;
    animation: circle 10s linear infinite;
}

.circle li:nth-child(2) {
    left: 35vw;
    animation-delay: 2s;
}

.circle li:nth-child(3) {
    left: 55vw;
    animation-delay: 6s;
}

.circle li:nth-child(4) {
    left: 75vw;
    animation-delay: 4s;
}

.circle li:nth-child(5) {
    left: 90vw;
    animation-delay: 8s;
}

@keyframes square {
    0% {
        transform: scale(0) rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
    }
}

@keyframes circle {
    0% {
        transform: scale(0) rotateY(0deg);
        opacity: 1;
        bottom: 0;
        border-radius: 0;
    }

    100% {
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
        bottom: 90vh;
        border-radius: 50%;
    }
}
</style>
